<template>
  <div class="box4" ref="map"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
//引入中国地图的JSON数据
import chinaJSON from './china.json'
//获取DOM元素
let map = ref()
//注册中国地图
echarts.registerMap('china', chinaJSON as any)
onMounted(() => {
  let mychart = echarts.init(map.value)
  //设置配置项
  mychart.setOption({
    //地图组件
    geo: {
      map: 'china', //中国地图
      roam: true, //是否开启鼠标缩放整个地图的效果
      //地图的位置及缩放
      left: 150,
      top: 260,
      right: 150,
      bottom: 0,
      zoom: 1.5,
      //地图上的文本标签
      label: {
        show: true, //文字显示出来
        color: 'white',
        fontSize: 12,
      },
      //地图的多边形图形样式
      itemStyle: {
        // 线性渐变填充颜色
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'red', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'blue', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        // 图形的透明度
        opacity: 0.8,
      },
      //地图高亮状态的多边形图形样式
      emphasis: {
        itemStyle: {
          color: 'red',
        },
        label: {
          fontSize: 20,
        },
      },
    },
    //布局位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    //系列
    series: [
      {
        type: 'lines', //路径(比如航线)系列
        data: [
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [119.306239, 26.075302], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              curveness: 0.2, // 线的曲度，支持从 0 到 1 的值，值越大曲度越大。
              color: 'orange',
              width: 2,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [114.298572, 30.584355], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              curveness: 0.2,
              color: 'yellow',
              width: 2,
            },
          },
        ],
        //动画特效
        effect: {
          show: true,
          // symbol: 'arrow', //动画特效的符号类型 -- 箭头
          //动画特效的符号类型 -- svg动画(飞机)
          symbol:
            'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
          color: 'white',
          symbolSize: 10, //动画特效的符号大小
        },
      },
    ],
  })
})
</script>

<style scoped></style>
